
<template>
<div>
  <div class="main-header-content">
      <div class="main-header" >
        <div style="display: flex">
          <Header >
          </Header>
        </div>
      </div>
  </div>


<div class="view-home-box">
  <div class="view-home">
  <div class="home-content">
    <div class="header-common-border" v-if="isExistTopClass">
      <div class="top-handler">
        <h2 class="left" style="margin: 0">置顶课程</h2>
        <div class="right">
          <button type="button" class="el-button el-button--primary el-button--medium" id="stu-home-element1" @click="openAddClassDialog">
            <i class="el-icon-plus"></i>
        <span>加入课程 </span>
      </button>
      </div>
      </div>
      <div class="top-classContext" >
        <div v-for ="(item,index) in topClass" :key="index">
          <div class="course-card" >
            <div class="card-header" @click="toClassPage(item)">
              <p class="semester">{{ item.academicYear+item.semester }}</p>
              <h3 class="course-title">{{ item.courseName }}</h3>
              <p class="course-code">{{ item.clazz }}</p>
              <p class="add-code">加课码:{{ item.courseCode }}</p>
            </div>
            <div class="card-content-info">
            </div>
            <div class="card-footer">
              <span class="teacher" @click="toMemberPage(item)">负责人:{{ item.name }}</span>
              <div>
                <button class="cancel-top" @click="unTop(item)">取消置顶</button>
                <el-dropdown class="more-options" trigger="click" >
                  <i class="el-icon-more"></i>
                  <el-dropdown-menu>
                    <el-dropdown-item><span @click="pigeonholeClass(item)">归档</span></el-dropdown-item>
                    <el-dropdown-item ><span @click="deleteClass(item)">退课</span></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

              </div>

            </div>
          </div>
        </div>

      </div>



    </div>

    <div class="view-home-noTop" v-if="!isExistTopClass">
      <button type="button" class="el-button el-button--primary el-button--medium" id="stu-home-element1" @click="openAddClassDialog">
        <i class="el-icon-plus"></i>
        <span>加入课程 </span>
      </button>
    </div>

    <AddClassComponent ref="addClass"></AddClassComponent>
    <PigeonholeComponent ref="pigeonholeClass"></PigeonholeComponent>

      <div class="class-box">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="width: 195px">
          <el-menu-item index="1">我学的</el-menu-item>
          <el-menu-item index="2" >我协助的</el-menu-item>
        </el-menu>

        <div class="search" style="height: 40px">
          <el-button style="margin-top:10px ;display: inline-block" @click="toPigeonhole">归档管理</el-button>
          <el-input 
            placeholder="请输入内容" 
            class="input-with-select" 
            style="width: 200px"
            v-model="searchQuery"
            @keyup.enter="searchClass"
          >
            <el-button
              slot="append" 
              icon="el-icon-search" 
              style="width: 50px;height: 40px;padding: 0"
              @click="searchClass"
            ></el-button>
          </el-input>
        </div>
      </div>

      <div class="class-chapter">
        <div v-if="activeIndexChange == 1 && learnClass.length>0">
        <el-collapse v-model="activeNames" @change="handleChange" >
          <el-collapse-item v-for="(item,index) in learnClass" :key="index" :title="item.studySemester" :name="index+1">
            <div class="class-chapter-item" >
              <div v-for ="(item1,index) in item.courseDTOList" :key="index">
                <div class="course-card">
                  <div class="card-header" @click="toClassPage(item1)">
                    <p class="semester">{{ item1.academicYear+item1.semester }}</p>
                    <h3 class="course-title">{{ item1.courseName }}</h3>
                    <p class="course-code">{{ item1.clazz }}</p>
                    <p class="add-code">加课码:{{ item1.courseCode }}</p>
                  </div>
                  <div class="card-content-info">
                  </div>
                  <div class="card-footer">
                    <span class="teacher" @click="toMemberPage(item)">负责人:{{ item1.name }}</span>
                    <div>
                      <button class="cancel-top" >
                        <span v-if="item1.isTop===0" @click="unTop(item1)">取消置顶</span>
                        <span v-if="item1.isTop===1" @click="top(item1)">置顶</span>
                      </button>

                      <el-dropdown class="more-options" trigger="click" >
                        <i class="el-icon-more"></i>
                        <el-dropdown-menu>
                          <el-dropdown-item><span @click="pigeonholeClass(item1)">归档</span></el-dropdown-item>
                          <el-dropdown-item ><span @click="deleteClass(item1)">退课</span></el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                    </div>

                  </div>
                </div>
              </div>
            </div>

          </el-collapse-item>

        </el-collapse>
      </div>
        <el-empty :image-size="200" v-else-if="activeIndexChange == 1 && learnClass.length<=0"></el-empty>

        <div v-if="activeIndexChange == 2 && assistClass.length>0">
          <el-collapse v-model="activeNames" @change="handleChange" >
            <el-collapse-item v-for="(item,index) in assistClass" :key="index" :title="item.studySemester" :name="index+1">
              <div class="class-chapter-item" >
                <div v-for ="(item1,index) in item.courseDTOList" :key="index">
                  <div class="course-card">
                    <div class="card-header" @click="toClassPage(item1)">
                      <p class="semester">{{ item1.academicYear+item1.semester }}</p>
                      <h3 class="course-title">{{ item1.courseName }}</h3>
                      <p class="course-code">{{ item1.clazz }}</p>
                      <p class="add-code">加课码:{{ item1.courseCode }}</p>
                    </div>
                    <div class="card-content-info">
                    </div>
                    <div class="card-footer">
                      <span class="teacher" @click="toMemberPage(item)">负责人:{{ item1.name }}</span>
                      <div>
                        <button class="cancel-top" @click="unTop(item1)">
                          <span v-if="item1.isTop===0" @click="unTop(item1)">取消置顶</span>
                          <span v-if="item1.isTop===1" @click="top(item1)">置顶</span>
                        </button>
                        <el-dropdown class="more-options" trigger="click" >
                          <i class="el-icon-more"></i>
                          <el-dropdown-menu>
                            <el-dropdown-item><span @click="pigeonholeClass(item1)">归档</span></el-dropdown-item>
                            <el-dropdown-item ><span @click="deleteClass(item1)">退课</span></el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>

                      </div>

                    </div>
                  </div>
                </div>
              </div>

            </el-collapse-item>
          </el-collapse>
        </div>
        <el-empty :image-size="200" v-else-if="activeIndexChange == 2 && assistClass.length<=0"></el-empty>

      </div>

  </div>
    </div>
  </div>
</div>
</template>


<script>


// import {localStorageService} from "@/utils/storageService";

import Header from "@/components/header/student/index.vue";
import {getRequest, postRequest} from "@/utils/api";
import {parseToken} from "@/utils/jwtUtil";
import {Message} from "element-ui";
import AddClassComponent from "@/components/class/addClass.vue";
import PigeonholeComponent from "@/components/class/pigeonholeClass/student.vue";
export default {
  components: {AddClassComponent, Header,PigeonholeComponent},
  name: "MainPageStudent",
  data() {
    return {
      topClass:[],
      learnClass:[],
      assistClass:[],
      activeNames:[1],
      activeIndex: '1',
      activeIndexChange: 1,
      activeIndex2: '1',
      isExistTopClass: true,
      id:0,
      unTopData:[],
      deleteData:[],
      searchQuery: '', // 新增：搜索关键词
      menus: [
        {
          name: '我的课堂',
        }
      ],
      menu: [
        {
          name: 'ai工具集',
          path: '/taskManagement'
        },
        {
          name:'论文查重',
          path: '/taskManagement'
        },
        {
          name:'任务管理',
          path: '/taskManagement'
        }
      ],
    }

  },
  methods: {
    toMemberPage(item){
      this.getUserType(item)
      this.$router.push("/member")
    },
    /**
     *归档课程
     */
    pigeonholeClass(item){
      console.log(item)
      const pigeonholeData ={
        courseId:item.id,
        userId:this.id
      }
      postRequest('/userCourse/pigeonholeClass',pigeonholeData).then(() => {
        console.log('归档成功')
        console.log(pigeonholeData)
        this.refreshData()
      })
    },
    toPigeonhole(){
      this.$refs.pigeonholeClass.showModal()
    },
    handleChange(val) {
      console.log(val);
    },
    // changeIsTopStatus(){
    //   this.isExistTopClass = !this.isExistTopClass;
    //
    //   console.log(this.isExistTopClass)
    // },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      console.log("这是"+key);
      this.activeIndexChange = key;
    },
    /**
     * 刷新数据
     */
    refreshData() {
      this.getAllClass()
    },
    getTopClass() {
      getRequest('/userCourse/getTopClass',{id:this.id}).then(res => {
        // console.log(res.data.data)
        this.topClass = res.data.data;
      })
    },
    getLearnClass(){
      getRequest('/userCourse/getLearnClass',{id:this.id}).then(res => {
        // console.log(3)
        // console.log(res)
        this.learnClass = res.data.data;
        console.log(this.learnClass)
      })
    },
    getAssistClass(){
      getRequest('/userCourse/getAssistClass',{id:this.id}).then(res => {
        // console.log(2)
        // console.log(res)
        this.assistClass = res.data.data;
        // console.log(this.assistClass)
      })
    },
    getAllClass(){
      this.getLearnClass()
      this.getTopClass()
      this.getAssistClass()
    },
    /**
     * 取消置顶
     * @param item
     */
    unTop(item) {
      console.log(item)
      this.unTopData ={
        courseId:item.id,
        userId:this.id
      }
      // console.log(this.unTopData)
      postRequest('/userCourse/unTop',this.unTopData).then(() => {
        this.refreshData()
      })
    },
    /**
     * 置顶
     * @param item
     */
    top(item) {
      console.log(item)
      this.unTopData ={
        courseId:item.id,
        userId:this.id
      }
      // console.log(this.unTopData)
      postRequest('/userCourse/top',this.unTopData).then(() => {
        this.refreshData()
      })
    },
    /**
     * 退课
     */
    deleteClass(item) {
      this.deleteData ={
        courseId:item.id,
        userId:this.id
      }
      postRequest('/userCourse/deleteClass',this.deleteData).then(() => {
        this.refreshData()
      })
    },
    /**
     * 加入课程
     */
    openAddClassDialog() {
      console.log('1111')
      this.$refs.addClass.open()
    },
    toClassPage(item){
      this.getUserType(item)
      this.$router.push("/ClassPage")
    },
    /**
     *获取点击课程用户身份
     */
    getUserType(item){
      const userInfo = JSON.parse(localStorage.getItem('UserInfo'))
      const userMessage = {
        userId:userInfo.id,
        courseId:item.id
      }
      postRequest('/userCourse/getUser',userMessage).then(res => {
        localStorage.setItem('course',item.id)
        localStorage.setItem('courseRole',res.data.data.type)
        localStorage.setItem('courseId',item.id)
        localStorage.setItem('courseName',item.courseName)
        localStorage.setItem('className',item.clazz)
        const courseInfo = {
          course:item.id,
          courseName:item.courseName,
          clazz:item.clazz,
          courseRole:res.data.data.type,
          courseId:item.id
        }
        localStorage.setItem('courseInfo',JSON.stringify(courseInfo))
      })
    },
    /**
     * 搜索课程
     */
    searchClass() {
      if (this.searchQuery.trim() === '') {
        this.refreshData();
        return;
      }
      const searchInfo ={
        userId: this.id,
        searchMessage: this.searchQuery
      }
      postRequest('/userCourse/searchNormalClass', searchInfo).then(res => {
        console.log(res)
        this.learnClass = res.data.data.studyCourseDTOList;
        this.assistClass = res.data.data.assistCourseDTOList;
        this.teachClass = res.data.data.teachCourseDTOList;
      });
    },
  },

  mounted() {
    // console.log(this.$store.state.user.userInfo)
    // this.$refs.child.handleSelect(this.menus)
    try {
      this.id = parseToken(localStorage.getItem('Token')).claims.id
    } catch (e) {
      Message.error("登录超时请重新登录")
      this.$router.push('/login')
      return;
    }
    this.refreshData()
  },
  updated() {


  },
  errorCaptured(err, vm, info) {
    console.log(err)
    console.log(info)
  }
}
</script>

<style scoped>
.main-header{
  position: fixed;
  background-color: #fff;
  z-index: 999;
  top: 0;
  left: 0;
  height: 71px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  box-shadow: 0 1px 0 0 #dfdfdf;
  justify-content: space-between;
}


.main-header-content{
  height: 64px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 10px #ccc;
}

.view-home{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.view-home-box{
  max-width: 1380px;
  margin: 75px auto;
}
.header-common-border{
  border: 1px solid #dadce0;
  padding: 18px;
  border-radius: 8px;
}
.top-handler{
  display: flex;
  justify-content: space-between;
}
.home-content{
  flex: 1;
}
.class-box{
  display: flex;
  justify-content: space-between;
}
.input-with-select{
  width: 200px;
  padding: 0 10px;
}
.view-home-noTop{
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
.top-classContext{
  display: flex;
  margin: 11px;
  flex-wrap: wrap;
}
.course-card {
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background-color: #fff;
            margin: 10px;
            cursor: pointer;
          }

.card-header {
          background-image: url('https://assets.ketangpai.com/theme/min/20.jpg'); /* 请替换为实际背景图片路径 */
          background-size: cover;
          background-position: center;
          padding: 18px 24px;
          color: white;
        }

.semester {
  opacity: .6;
  font-size: 12px;
  font-weight: 400;
  vertical-align: baseline;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  margin:0;
}

.course-title {
            font-size: 18px;
  margin: 0 0 10px 0;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
          }

.course-code {
            font-size: 14px;
            margin-bottom: 5px;
          }

.add-code {
  margin: 18px 0 0 0;
         font-size: 14px;
  font-weight: 400;
       }
.card-content-info{
  cursor: pointer;
  height: 30px;
  padding: 0 20px 16px 20px;
  border: none;
}
.card-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 14px 12px;

        }

.teacher {
  font-size: 12px;
  display: inline-block;

}

.cancel-top {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 12px;

          }

.more-options {
          cursor: pointer;
        }
.class-chapter-item{
  display: flex;
  background:#f8f9fa ;
}
</style>
